<template>
	<view class="content">
		<!-- 顶部区域 -->
		<view class="cos_head">
			<view class="topNav">
					  <view class="back" @click="back">
						  <image :src="imgUrl+'/static/wap/img/whiteBack.png'" mode="" class="backImg"></image>
					  </view>
					  <view class="navTitle">费用中心</view>
					  <view class="emptyBox"></view>
			</view>
			<!-- 个人信息 -->
			<view class="head_info">
				<text>{{costCenterdata.truename}}</text>
				<text>{{costCenterdata.community}}</text>
			</view>
			<!-- 右上图片区域 -->
			<view class="head_img">
			 
			</view>
			<!-- 下方详情信息 -->
			<view class="head_detail">
				<!-- 左侧电费 -->
				<view class="deta_water">
					<!-- 头部图标 -->
					<view class="deta_top">
							<image class="deta_top_img" :src="imgUrl+'/static/wap/img/fei_dain@2x.png'" mode=""></image>
							<text class="deta_top_tit">电费</text>
					</view>
					<!-- 下方余额信息 -->
					<view class="deta_con">
						<view style="width: 100%;" class="over">
							<text>可用余额:</text>
							<text style="color: #F99600; margin-left: 20rpx;"> {{costCenterdata.electricity_bill_balance||'0.00'}}</text>
						</view>
						<view style="width: 100%;" class="over">
							<text>本月消费:</text>
							<text style="color: #F99600;  margin-left: 20rpx;"> {{costCenterdata.electric_info.total||'0.00'}}</text>
						</view>
						<view style="width: 100%;" class="over">
							<text>结算时间:</text>
							<text style="color: #F99600;  margin-left: 20rpx;"> {{costCenterdata.electric_info.settlement_time}}</text>
						</view>
						<view style="width: 100%;" class="over">
							<text>预计可用{{costCenterdata.electric_info.estimate||0}}天</text>
						</view>
					</view>
				</view>
				 <!-- 水费 -->
				 <view class="deta_water">
				 	<!-- 头部图标 -->
				 	<view class="deta_top">
				 			<image class="deta_top_img" :src="imgUrl+'/static/wap/img/fei_shui@2x.png'" mode=""></image>
				 			<text class="deta_top_tit">水费</text>
				 	</view>
				 	<!-- 下方余额信息 -->
				 	<view class="deta_con">
						<view style="width: 100%;" class="over">
							<text>可用余额:</text>
							<text style="color: #F99600; margin-left: 20rpx;"> {{costCenterdata.water_bill_balance||'0.00'}}</text>
						</view>
						<view style="width: 100%;" class="over">
							<text>本月消费:</text>
							<text style="color: #F99600;  margin-left: 20rpx;"> {{costCenterdata.water_info.total||'0.00'}}</text>
						</view>
						<view style="width: 100%;" class="over">
							<text>结算时间:</text>
							<text style="color: #F99600;  margin-left: 20rpx;"> {{costCenterdata.water_info.settlement_time}}</text>
						</view>
						<view style="width: 100%;" class="over">
							<text>预计可用{{costCenterdata.water_info.estimate||0}}天</text>
						</view>
				 	</view>
				 </view>
			</view>
		</view>
		<!-- 下方列表区 -->
		<view class="me_list">
			<!-- 缴费 -->
			<navigator class="me_item" url="../payPage/payPage">
				<image class="me_item_img" :src="imgUrl+'/static/wap/img/fei_one@2x.png'"></image>
				<text class="me_item_txt">缴费</text>
				<image class="me_item_arr" :src="imgUrl+'/static/wap/img/fei_arrow@2x.png'"></image>
			</navigator>
			<!-- 余额查询 -->
			<navigator class="me_item" url="../balanceCheck/balanceCheck">
				<image class="me_item_img" :src="imgUrl+'/static/wap/img/fei_two@2x.png'"></image>
				<text class="me_item_txt">余额查询</text>
				<image class="me_item_arr" :src="imgUrl+'/static/wap/img/fei_arrow@2x.png'"></image>
			</navigator>
			<!-- 缴费记录 -->
			<navigator class="me_item" url="../payRecord/payRecord">
				<image class="me_item_img" :src="imgUrl+'/static/wap/img/fei_three@2x.png'"></image>
				<text class="me_item_txt">缴费记录</text>
				<image class="me_item_arr" :src="imgUrl+'/static/wap/img/fei_arrow@2x.png'"></image>
			</navigator> 
		</view>
	</view>

</template>

<script>
	import util from '../../static/util.js'
	export default {
		components: {},
		data() {
			return {
				imgUrl:util.globalData.imgPre,
				costCenterdata:'',
			}
		},
		onLoad() {
           this.costCenter()
		},
		methods: { 
			back(){
				uni.navigateBack()
			},
			costCenter(){
				var that=this;
				that.ajax({
					url:'api/user/costCenter',
					success:function(res){
						that.costCenterdata=res.data
					}
				  })
			}
		}
	}
</script>

<style lang="less" scoped>
	.content{
		color: #333;
	    padding-top:var(--status-bar-height);
	}
	.backImg{
		width: 40rpx;
		height: 40rpx;
		padding: 30rpx;
	}
	.navTitle{
		line-height: 100rpx;
		color: #FFFFFF;
		font-size: 34rpx;
	}
	.emptyBox{
		width: 100rpx;
	}
	.topNav{
		display: flex;
		justify-content: space-between;
		position: absolute;
		width: 100vw;
		left: 0;
		top: var(--status-bar-height);
	}
	// 顶部区域
	.cos_head{
		position: relative;
		height: 704rpx;
		background: url(https://nengyuan.chuangxiangdianli.com/static/wap/img/fei_bg@2x.png) no-repeat;
		background-size: 100% 100%;
		// 右上图片
		.head_img{ 
			position: absolute;
			right: 0;
			width: 284rpx;
			height: 328rpx;
			background:url(https://nengyuan.chuangxiangdianli.com/static/wap/img/qian@2x.png) no-repeat;
			background-size: 100% 100%;
			z-index: 10;
		}
		// 左侧信息
		.head_info{ 
			margin: 154rpx 0 0 74rpx;
			float: left;
			width: 341rpx; 
			color: #fff;
			font-size: 36rpx; 
			& text:nth-child(1){
				display: block;
			} 
			& text:nth-child(2){
				font-size: 24rpx;
				opacity: 0.64;
			} 
		}
		// 底部详情信息
		.head_detail{
			display: flex;
			padding: 0 36rpx;
			padding-top: 30rpx;
			position: absolute;
			bottom: 112rpx;
			left: 50%;
			transform: translate(-50%);
			width: 618rpx;
			// height: 275rpx;
			background-color: #fff;
			border-radius: 20rpx 80rpx 20rpx 80rpx;
			.deta_water{ 
				width: 50%; 
				.deta_top{
					height: 95rpx;
					.deta_top_img{
						margin-right: 20rpx;
						width: 95rpx;
						height: 95rpx;
						vertical-align: middle;
					}
					.deta_top_tit{
						font-size: 36rpx;
						font-family: PingFang SC Medium, PingFang SC Medium-Medium;
						font-weight: bold;
						color: #333333;
					}
				}
				.deta_con{
					// margin-left: 40rpx;
					font-size: 28rpx;
					color: #666;
					line-height: 52rpx;
					font-weight: bold; 
					& text:last-child {
						color: #999; 
					}
				}
			} 
		}
	}
	
	// 列表
	.me_list{
		// padding: 0 30rpx;
		width: 92%;
		margin: 0 auto;
		margin-top: -80rpx;
		border-radius: 20px;
		overflow: hidden;
		.me_item{  
			position: relative;
			color: #333;
			font-size: 30rpx;
			height: 128rpx;
			line-height: 128rpx; 
			background-color: #fff;
			border-bottom: 1rpx solid #f2f2f2; 
			.me_item_img{
				margin-right: 34rpx;
				width: 50rpx;
				height: 50rpx; 
				vertical-align: middle;
				margin-left: 43rpx;
			}
			.me_item_arr{
				position: absolute;
				right: 0;
				top: 50%;
				transform: translate(-50%);
				width: 21rpx;
				height: 21rpx;
			}
		}
		& :nth-child(even) {
			margin-bottom: 20rpx;
		}
	} 

</style>
